<template>
  <div>
    <div class="itemize">
      <div class="itemize-nav">
        <div
          class="itemize-item"
          v-for="(item, index) in itemName"
          :key="index"
        >
          <div class="itemize-box">
            <div>
              <router-link :to="itemName[index].url"
                ><img :src="item.img"
              /></router-link>
            </div>
            <div class="nav-name">
              <a :href="itemName[index].url"> {{ item.name }}</a>
            </div>
          </div>
          <div class="quan-none">
            <img src="../../assets/img/sortimg/forest_in_list_bg.png" />
          </div>
        </div>
      </div>
    </div>

    <div class="all-food" v-loading="loading">
      <ul>
        <li v-for="(item, index) in allFood" :key="index">
          <div class="foodimgb" @click="queryFood(index)">
            <img :src="allFood[index].fimg" alt="" />
          </div>
          <div class="foodname" @click="queryFood(index)">
            {{ allFood[index].fname }}
          </div>
        </li>
      </ul>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        :currentPage="curPage"
        @current-change="page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "ZhongGuo",
  data() {
    return {
      allFood: "",
      itemName: [
        {
          name: "所有美食",
          url: "/sortpage",
          img: "http://juntower.top/all.svg",
        },
        {
          name: "中式菜系",
          url: "/chinesefood",
          img: "http://juntower.top/zhongshi.svg",
        },
        {
          name: "传统美食",
          img: "http://juntower.top/chuan.svg",
          url: "/traditionfood",
        },
        {
          name: "外国美食",
          img: "http://juntower.top/xican.svg",
          url: "/tianping",
        },
        {
          name: "甜品/饮品",
          img: "http://juntower.top/tianping2x.svg",
          url: "/foreignfood",
        },
      ],
      total: 0,
      indexs: "",
      curPage: 1,
      loading: true,
    };
  },
  created() {
    if (this.$route.query.page != undefined) {
      this.curPage = this.$route.query.page;
    }
    request({
      url: "/foot/queryAllFootByFtId",
      params: {
        ftId: 1,
        pageNum: this.curPage,
      },
    })
      .then((res) => {
        this.allFood = res.data.data.list;
        this.total = res.data.data.total;
        this.loading = false;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    page(currentPage) {
      request({
        url: "/foot/queryAllFootByFtId",
        params: {
          ftId: 1,
          pageNum: currentPage,
        },
      })
        .then((res) => {
          this.allFood = res.data.data.list;
          this.total = res.data.data.total;
          this.$router.push({
            path: "/chinesefood",
            query: {
              page: currentPage,
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    queryFood(index) {
      this.$router.push({
        path: "/showfood",
        query: {
          fid: this.allFood[index].fid,
        },
      });
    },
  },
};
</script>

<style>
</style>